<template>
  <el-dialog
    v-model="dialogVisible"
    title="批量添加期限"
    top="35vh"
    width="450px"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-scrollbar max-height="60vh" v-loading="loading">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="生成规则" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio-button label="每月" :value="1" />
            <el-radio-button label="每月15日及月末" :value="2" />
            <el-radio-button label="每季度" :value="3" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="起止时间" prop="time">
          <el-date-picker
            v-model="formData.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY年MM月DD日"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, useTemplateRef } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
import { disabledDate } from '@/plugins/date'

dayjs.extend(quarterOfYear)

const emit = defineEmits(['update'])

const formRef = useTemplateRef<FormInstance>('formRef')

const dialogVisible = ref(false)
const loading = ref(false)
const formData = reactive({
  type: null,
  time: [],
})

const rules = ref<FormRules<typeof formData>>({
  type: { required: true, message: '请选择生成规则', trigger: 'change' },
  time: { required: true, message: '请选择起止时间', trigger: 'change' },
})

defineExpose({ show })

function show() {
  dialogVisible.value = true
}

function close() {
  dialogVisible.value = false
  loading.value = false
  Object.assign(formData, {
    type: null,
    time: [],
  })
}

function getTableData() {
  const temp = []
  let startDate = dayjs(formData.time[0])
  const endDate = dayjs(formData.time[1])
  if (formData.type === 1) {
    while (startDate.isBefore(endDate)) {
      const monthEndDay = startDate.endOf('month')
      if (monthEndDay.isAfter(endDate)) {
        temp.push({
          deadlineDate: endDate.format('YYYY-MM-DD 23:59:59'),
          isKey: 0,
          deadlineRequire: `${endDate.format('YYYY年MM月')}事项截至期限`,
        })
      } else {
        temp.push({
          deadlineDate: monthEndDay.format('YYYY-MM-DD 23:59:59'),
          isKey: 0,
          deadlineRequire: `${monthEndDay.format('YYYY年MM月')}事项截至期限`,
        })
      }
      startDate = monthEndDay.add(1, 'day')
    }
  } else if (formData.type === 2) {
    while (startDate.isBefore(endDate)) {
      let newDay = null
      if (startDate.date() >= 15) {
        newDay = startDate.endOf('month')
      } else {
        newDay = startDate.startOf('month')
        newDay = newDay.set('date', 15)
      }
      if (newDay.isAfter(endDate)) {
        temp.push({
          deadlineDate: endDate.format('YYYY-MM-DD 23:59:59'),
          isKey: 0,
          deadlineRequire: `${endDate.format('YYYY年MM月DD日')}事项截至期限`,
        })
      } else {
        temp.push({
          deadlineDate: newDay.format('YYYY-MM-DD 23:59:59'),
          isKey: 0,
          deadlineRequire: `${newDay.format('YYYY年MM月DD日')}事项截至期限`,
        })
      }
      startDate = newDay.add(1, 'day')
    }
  } else if (formData.type === 3) {
    while (startDate.isBefore(endDate)) {
      const quarterEndDay = dayjs(startDate).endOf('quarter')
      if (quarterEndDay.isAfter(endDate)) {
        temp.push({
          deadlineDate: endDate.format('YYYY-MM-DD 23:59:59'),
          isKey: 0,
          deadlineRequire: `${endDate.format('YYYY年')}${endDate.quarter()}季度事项截至期限`,
        })
      } else {
        temp.push({
          deadlineDate: quarterEndDay.format('YYYY-MM-DD 23:59:59'),
          isKey: 0,
          deadlineRequire: `${quarterEndDay.format('YYYY年')}${quarterEndDay.quarter()}季度事项截至期限`,
        })
      }
      startDate = quarterEndDay.add(1, 'day')
    }
  }

  temp[temp.length - 1].deadlineRequire = '事项最终截至期限'
  temp[temp.length - 1].isKey = 1
  return temp
}

function submit() {
  formRef.value.validate(async (bool) => {
    if (!bool) {
      return
    }

    const temp = getTableData()
    emit('update', temp)
    close()
  })
}
</script>

<style scoped lang="scss">
.el-radio-group {
  width: 100%;
}

:deep(.el-radio-button) {
  flex: 1 1 auto;
}

:deep(.el-radio-button__inner) {
  width: 100%;
}
</style>
